<!DOCTYPE html>

<html lang="en" data-content_root="../../">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Making a deployment zipfile &#8212; Pytch  documentation</title>
    <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=03e43079" />
    <link rel="stylesheet" type="text/css" href="../../_static/classic.css?v=36340f97" />
    <link rel="stylesheet" type="text/css" href="../../_static/css/pytch-classic.css?v=0321735e" />
    
    <script src="../../_static/documentation_options.js?v=7f41d439"></script>
    <script src="../../_static/doctools.js?v=9bcbadda"></script>
    <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script>
    
    <link rel="icon" href="../../_static/favicon.ico"/>
    <link rel="author" title="About these documents" href="../../about.html" />
    <link rel="index" title="Index" href="../../genindex.html" />
    <link rel="search" title="Search" href="../../search.html" />
    <link rel="next" title="Local testing of deployment zipfile" href="testing-deployment-zipfile.html" />
    <link rel="prev" title="Testing while developing" href="development-local-server.html" /> 
  </head><body>
<div class="NavBar">
  <a href="../../../app/"><h1>Pytch</h1></a>
  <ul>
    <a href="https://pytch.scss.tcd.ie/"><li>About Pytch</li></a>
    <a href="../../index.html"><li>Help</li></a>
    <a href="../../../app/tutorials/"><li>Tutorials</li></a>
    <a href="../../../app/my-projects/"><li>My projects</li></a>
  </ul>
</div>
<div class="warning-work-in-progress">
  <p>These help pages are incomplete — we are working on it!</p>
</div>
  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <section id="making-a-deployment-zipfile">
<span id="making-deployment-zipfile"></span><h1>Making a deployment zipfile<a class="headerlink" href="#making-a-deployment-zipfile" title="Link to this heading">¶</a></h1>
<p>We want to be able to host different beta versions of the site at, e.g.,:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">pytch</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">beta</span><span class="o">/</span><span class="n">SOME</span><span class="o">-</span><span class="n">BUILD</span><span class="o">-</span><span class="n">IDENTIFIER</span>
</pre></div>
</div>
<p>with the latest beta available at:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">pytch</span><span class="o">.</span><span class="n">org</span><span class="o">/</span><span class="n">beta</span><span class="o">/</span><span class="n">latest</span><span class="o">/</span>
</pre></div>
</div>
<p>We also want to make real versioned releases, such that the latest is
available at:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">pytch</span><span class="o">.</span><span class="n">org</span><span class="o">/</span>
</pre></div>
</div>
<p>This is achieved via a git ‘superproject’ <code class="docutils literal notranslate"><span class="pre">pytch-releases</span></code> which has
the contributing repos as git submodules.</p>
<section id="layout">
<h2>Layout<a class="headerlink" href="#layout" title="Link to this heading">¶</a></h2>
<p>The various components of the site each contribute a ‘layer’, which is
unzipped under a particular subdirectory.  Most repos are responsible
for making their own layer, via a script</p>
<div class="highlight-text notranslate"><div class="highlight"><pre><span></span>REPO-ROOT/website-layer/make.sh
</pre></div>
</div>
<p>However, the tutorials layer is produced differently; see below.</p>
<section id="virtual-machine">
<h3>Virtual Machine<a class="headerlink" href="#virtual-machine" title="Link to this heading">¶</a></h3>
<p>Comes from the <code class="docutils literal notranslate"><span class="pre">pytch-vm</span></code> repo.  Produces files in:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">skulpt</span><span class="o">/...</span>
</pre></div>
</div>
</section>
<section id="tutorials">
<h3>Tutorials<a class="headerlink" href="#tutorials" title="Link to this heading">¶</a></h3>
<p>Comes from the <code class="docutils literal notranslate"><span class="pre">pytch-tutorials</span></code> repo.  The files are not meant for
direct presentation by the user’s browser, although no harm will come
if the user does look directly at the files.  The files are intended
to be <code class="docutils literal notranslate"><span class="pre">fetch()</span></code>’d by the webapp.  Files end up in:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">tutorials</span><span class="o">/</span><span class="n">tutorials</span><span class="o">-</span><span class="n">index</span><span class="o">.</span><span class="n">html</span>
<span class="n">tutorials</span><span class="o">/</span><span class="n">bunner</span><span class="o">/...</span>
<span class="n">tutorials</span><span class="o">/</span><span class="n">boing</span><span class="o">/...</span>
</pre></div>
</div>
<p>This layer is unusual in that it is built by a script in the
<code class="docutils literal notranslate"><span class="pre">pytch-build</span></code> repo:</p>
<div class="highlight-text notranslate"><div class="highlight"><pre><span></span>pytch-build/makesite/tutorials-layer.sh
</pre></div>
</div>
</section>
<section id="webapp-ide">
<h3>WebApp / IDE<a class="headerlink" href="#webapp-ide" title="Link to this heading">¶</a></h3>
<p>Comes from <code class="docutils literal notranslate"><span class="pre">pytch-webapp</span></code> repo.  This is a React app and so needs to
be built with knowledge of where it will be deployed (via
<code class="docutils literal notranslate"><span class="pre">BASE_URL</span></code>).  The Pytch app in particular also needs to be built
knowing where it will get its Skulpt files from
(<code class="docutils literal notranslate"><span class="pre">VITE_SKULPT_BASE</span></code>), where it will get tutorial information from
(<code class="docutils literal notranslate"><span class="pre">VITE_TUTORIALS_BASE</span></code>), and other similar settings.  See <a class="reference internal" href="../../webapp/developer/environment-variables.html#pytch-webapp-environment-variables"><span class="std std-ref">the
full list</span></a> elsewhere in the
developer documentation.</p>
<p>The files from the webapp end up in:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">app</span><span class="o">/...</span>
</pre></div>
</div>
<p>To allow a user to directly visit a URL within the app (for example,
<code class="docutils literal notranslate"><span class="pre">/ide/3</span></code>), the web server must be directed to serve <code class="docutils literal notranslate"><span class="pre">index.html</span></code>
for all non-existent files.  This is done by a <code class="docutils literal notranslate"><span class="pre">.htaccess</span></code> file
created inside</p>
<div class="highlight-text notranslate"><div class="highlight"><pre><span></span>pytch-webapp/website-layer/make.sh
</pre></div>
</div>
</section>
<section id="informational-content">
<h3>Informational content<a class="headerlink" href="#informational-content" title="Link to this heading">¶</a></h3>
<p>Comes from the <code class="docutils literal notranslate"><span class="pre">pytch-website</span></code> repo, and produces content in:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">doc</span><span class="o">/...</span>
</pre></div>
</div>
</section>
</section>
<section id="assembly-method">
<h2>Assembly method<a class="headerlink" href="#assembly-method" title="Link to this heading">¶</a></h2>
<p>One script for each layer, which emits a zipfile suitable for
unzipping inside the deployment directory.  A top-level <code class="docutils literal notranslate"><span class="pre">make.sh</span></code>
script within <code class="docutils literal notranslate"><span class="pre">pytch-releases</span></code> calls those scripts, and then merges
the resulting zipfiles into one.</p>
<p>With the superproject <code class="docutils literal notranslate"><span class="pre">pytch-releases</span></code> cleanly checked out at either
a particular tagged release, or some other branch,</p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span><span class="nb">cd</span><span class="w"> </span>/home/somebody/dev/pytch-releases
./make.sh
</pre></div>
</div>
<p>will build the deployment zipfile.  If the repo is currently checked
out at <code class="docutils literal notranslate"><span class="pre">releases</span></code>, there must also be a tag on that commit, and a
release zipfile is made.  Otherwise a beta zipfile is made.</p>
<p>Note that if the <code class="docutils literal notranslate"><span class="pre">pytch-releases</span></code> repo is checked out at the
<code class="docutils literal notranslate"><span class="pre">releases</span></code> branch, then the contained submodule <code class="docutils literal notranslate"><span class="pre">pytch-tutorials</span></code>
must also be checked out at its <code class="docutils literal notranslate"><span class="pre">releases</span></code> branch.</p>
<p>The name of the zipfile is emitted to stdout, allowing usage like</p>
<div class="highlight-bash notranslate"><div class="highlight"><pre><span></span><span class="nv">zipfilename</span><span class="o">=</span><span class="k">$(</span>./make.sh<span class="k">)</span>
</pre></div>
</div>
<p>See also:</p>
<ul class="simple">
<li><p><a class="reference internal" href="testing-deployment-zipfile.html#testing-deployment-zipfile"><span class="std std-ref">Local testing of the deployment-ready
zipfile</span></a> — before deploying, you can
serve the content exactly as it is in the zipfile.</p></li>
<li><p><a class="reference internal" href="deploying-to-hosting.html#deploying-to-hosting"><span class="std std-ref">How to deploy the content to hosting</span></a> —
there are some details regarding serving the content in a manner
required for React apps.</p></li>
</ul>
<p>See also <a class="reference internal" href="../../developer/development-setup.html"><span class="doc">Getting started with Pytch development</span></a>.</p>
</section>
</section>


            <div class="clearer"></div>
          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="Main">
        <div class="sphinxsidebarwrapper"><ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../../webapp/user/index.html">Using the Pytch web app</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../vm/user/index.html">Writing Pytch programs</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../about.html">About Pytch</a></li>
<li class="toctree-l1"><a class="reference internal" href="../../contact.html">Contact</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="../../developer.html">Developer documentation</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="../../developer/development-setup.html">Development setup</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/design-overview.html">Design overview</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../vm/developer/index.html">VM</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../webapp/developer/index.html">Webapp</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../medialib/developer/index.html">Media library</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../developer/index.html">Website</a></li>
<li class="toctree-l2 current"><a class="reference internal" href="../index.html">Tools</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="../index.html#tutorial-compiler-and-related-tools">Tutorial compiler and related tools</a></li>
<li class="toctree-l3 current"><a class="reference internal" href="../index.html#assembly-of-website-bundle">Assembly of website bundle</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../source-build.html">Source and build information</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../releases/changelog.html">Changelog</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../legal/index.html">Legal information</a></li>
</ul>
<div class="docs-home-link"><hr>
  <ul>
    <li>
      <a href="../../index.html">Pytch help home</a>
    <li>
  </ul>
</div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  </body>
</html>